import * as React from "react"
import {
  CartesianGrid,
  Legend,
  Line,
  LineChart,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from "recharts"

import { cn } from "@/lib/utils"

export type ChartConfig = Record<
  string,
  {
    label: string
    color?: string
  }
>

interface ChartContainerProps extends React.HTMLAttributes<HTMLDivElement> {
  config: ChartConfig
}

export function ChartContainer({
  config,
  className,
  children,
  ...props
}: ChartContainerProps) {
  return (
    <div className={cn("h-[300px]", className)} {...props}>
      <ResponsiveContainer width="100%" height="100%">
        {children}
      </ResponsiveContainer>
    </div>
  )
}

interface ChartTooltipProps {
  cursor?: boolean
  content?: React.ReactNode
}

export function ChartTooltip({ cursor = true, content }: ChartTooltipProps) {
  return <Tooltip cursor={cursor} content={content} />
}

interface ChartTooltipContentProps {
  hideLabel?: boolean
  indicator?: "dot" | "line"
}

export function ChartTooltipContent({
  hideLabel,
  indicator = "dot",
  ...props
}: ChartTooltipContentProps) {
  return (
    <div className="rounded-lg border bg-background p-2 shadow-sm">
      <div className="grid gap-2">
        <div className="flex items-center gap-2">
          {indicator === "dot" && (
            <div className="h-2 w-2 rounded-full bg-primary" />
          )}
          {indicator === "line" && (
            <div className="h-0.5 w-3 bg-primary" />
          )}
          <div className="text-sm font-medium">Total</div>
        </div>
        {!hideLabel && (
          <div className="text-sm text-muted-foreground">
            Showing total visitors for the last 6 months
          </div>
        )}
      </div>
    </div>
  )
}

interface ChartLegendProps {
  content?: React.ReactNode
}

export function ChartLegend({ content }: ChartLegendProps) {
  return <Legend content={content} />
}

export function ChartLegendContent() {
  return (
    <div className="flex items-center gap-4">
      <div className="flex items-center gap-2">
        <div className="h-2 w-2 rounded-full bg-primary" />
        <div className="text-sm font-medium">Desktop</div>
      </div>
      <div className="flex items-center gap-2">
        <div className="h-2 w-2 rounded-full bg-primary" />
        <div className="text-sm font-medium">Mobile</div>
      </div>
    </div>
  )
} 